<template>
	<view>
		<view class="goods">
			<view class="goods_title"> 退款商品</view>
			<view class="goods_info">
				<view class="productinfo_pic">
					<image :src="content.src" mode="widthFix"></image>
				</view>
				<view class="productinfo_info">
					<view class="title">{{ content.title }}</view>
					<view class="standard">{{ content.standard }};{{ content.weight }}</view>
				</view>

			</view>
		</view>
		<view class="refund_info">
			<view class="refund_info_item1" @tap="choosesCause()">
				<view class="">退款原因</view>
				<view class="refund_info_item1_2">
					<input type="text" v-model="refundCause" placeholder="请选择"  align="right"  />
					<i class=" icon ">&#xe637;</i>
				</view>
			</view>

			<view class="refund_info_item">
				<view class="">退款金额</view>
				<view class="refund_info_item_1 colorRed">
					￥{{content.price}}
				</view>
			</view>

			<view class="refund_info_item refund_info_item3">
				<view class="">退款说明</view>
				<view class="refund_info_item_1">
					<input type="text" v-model="refundExplain" placeholder="选填" placeholder-class="place" />
				</view>
			</view>

		</view>
		<view class="refund_pic">
			<view class="refund_pic_title">上传凭证</view>
			<view class="refund_pic_info">
				<view class="refund_pic_info_pic">
					<image :src="Url+'mine/index/pic.png'"></image>
				</view>

				<view class="refund_pic_info_explain">
					仅支持jpg、png图片上传，大小不超过5M
				</view>
			</view>
		</view>

		<!-- 选择退款原因 弹窗 -->
		<uni-popup ref="standard" type="bottom">
			<view class="standard_content">
				<i class="icon erricon" @tap="closestand">&#xe698;</i>
				<view class="title">退款原因</view>
				<radio-group @change="radioChange">
					<view v-for="(item,index) in causeList" :key="index" class="chooseCause">
						<view>{{item}}</view>
						<radio class="radio_info" color="red" :value="item"></radio>
					</view>
				</radio-group>


			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Url:this.Imgurl,
				content: {},
				// 退款原因
				refundCause:'',
				// 退款说明
				refundExplain:'',
				standardState: 0,
				causeList: [
					'拍错/多拍/不想要',
					'协商一致退款',
					'缺货',
					'未按约定时间发货',
					'其他'
				]
			}
		},
		onLoad(options) {
			this.content = JSON.parse(options.content);
			console.log(this.content);
		},
		methods: {
			// 打开规格选择
			choosesCause() {
				this.standardState = 0,
					this.$refs.standard.open();
			},
			// 关闭弹框
			closestand() {
				this.$refs.standard.close();
			},
			radioChange: function(evt) {
				// alert(evt.target.value)
				this.refundCause = evt.target.value
				// for (let i = 0; i < this.items.length; i++) {
				// 	if (this.items[i].value === evt.target.value) {
				// 		this.current = i;
				// 		break;
				// 	}
				// }
			}

		}
	}
</script>

<style scoped lang="less">
	.goods {
		background: #fff;
		padding: 25upx;
		font-size: 28upx;

		.goods_title {
			padding-bottom: 25upx;
			border-bottom: 1upx solid #e1e1e1;
		}

		.goods_info {
			// background: #f9f9f9;
			padding: 25upx 0;
			display: flex;
			align-items: center;

			.productinfo_pic {
				width: 120upx;
				height: 120upx;
				border: 2upx solid #e1e1e1;
				border-radius: 20upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 104upx;
					height: 104upx;
				}
			}

			.productinfo_info {
				margin-left: 30upx;

				.title {
					font-size: 24upx;
					color: #333333;
					line-height: 40upx;
				}

				.standard {
					font-size: 24upx;
					color: #999;
					margin-top: 10upx;
				}
			}
		}
	}

	.refund_info {
		margin-top: 15upx;
		background: #fff;
		padding: 0 25upx;
		padding-bottom: 60upx;
		font-size: 28upx;

		.refund_info_item1 {
			padding: 30upx 0;
			border-bottom: 1upx solid #e1e1e1;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.refund_info_item1_2 {
				
				display: flex;
				justify-content: flex-end;
				align-items: center;
				input{
					font-size: 28upx;
					margin-right: 10upx;
				}
				.icon {
					font-size: 24upx;
					color: #d3d3d3;
				}
			}

		}

		.refund_info_item {
			padding: 30upx 0;
			border-bottom: 1upx solid #e1e1e1;
			display: flex;
			align-items: center;

			.refund_info_item_1 {
				padding-left: 10upx;

			}

			.colorRed {
				color: red;
			}

		}

		.refund_info_item3 {
			border: none;
				input{
					font-size: 28upx;
					width: 560upx;
				}
		}

	}

	.refund_pic {
		margin-top: 15upx;
		background: #fff;
		padding: 30upx 25upx;
		padding-bottom: 40upx;
		font-size: 28upx;

		.refund_pic_title {
			margin-bottom: 30upx;
		}

		.refund_pic_info {
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;

			.refund_pic_info_pic {
				padding: 15upx;

				image {
					width: 108upx;
					height: 108upx;
					vertical-align: text-bottom;
				}
			}


			.refund_pic_info_explain {
				padding: 15upx;
				font-size: 20upx;
				color: #e1e1e1;
			}

		}
	}

	// 规格弹窗
	.standard_content {
		width: 100%;
		height: 760upx;
		background-color: #ffffff;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		padding: 30upx;
		box-sizing: border-box;
		position: relative;

		.erricon {
			font-size: 32upx;
			color: #999999;
			position: absolute;
			right: 20upx;
			top: 20upx;
		}

		.title {
			width: 100%;
			margin: auto;
			margin-top: 40upx;
			text-align: center;
		}

		.chooseCause {
			display: flex;
			justify-content: space-between;
			margin: 15upx 10upx;
			padding: 20upx 0;
			border-bottom: 1upx solid #e1e1e1;
			font-size: 26upx;

			.radio_info {
				transform: scale(0.7)
			}

			&:last-child {
				border: none;
			}

		}


	}
</style>
